// 分类标题 cephalosome_
Vue.component("cephalosome_navitems", {
    template: `<div class="navitems fl">
                <ul class="fl">
                    <li class="current"><a href="">首页</a></li>
                    <li><a href="">电脑频道</a></li>
                    <li><a href="">家用电器</a></li>
                    <li><a href="">品牌大全</a></li>
                    <li><a href="">团购</a></li>
                    <li><a href="">积分商城</a></li>
                    <li><a href="">夺宝奇兵</a></li>
                </ul>
                <div class="right_corner fl"></div>
            </div>`,
    data() {
        return {}

    },
    methods: {}
})

//  分类中的内容主体
Vue.component("cephalosome_navitems_body", {
    template: ` 
 <div>
                    <div class="cat" v-for="category in categorys">
                        <h3><a :href="category.id">{{category.cat_name}}</a><b></b></h3>
                        <div class="cat_detail">
                            <dl class="dl_1st"  v-for="c1 in category.children">
                                <dt><a :href="'list.html?cat='+c1.id">{{c1.cat_name}}</a></dt>
                                <dd>
                                    <a  v-for="c2 in c1.children" :href="'list.html?cat='+c2.id">{{c2.cat_name}}</a>
                                </dd>
                            </dl>
                        </div>
                    </div>
</div>`,
    created() {
        getCategorys().then(res => {
            this.categorys = res.data.data.data

        })

    },
    updated() {
        //导航菜单效果
        $(".cat").hover(function () {
            $(this).find(".cat_detail").show();
            $(this).find("h3").addClass("on");
        }, function () {
            $(this).find(".cat_detail").hide();
            $(this).find("h3").removeClass("on");
        });
    },
    data() {
        return {
            categorys: [],
        }

    },
    methods: {}
})

// 购物车
Vue.component("cephalosome_navitems_cart", {
    template: `<div class="cart fl">
                <dl>
                    <dt>
                        <a href="">去购物车结算</a>
                        <b></b>
                    </dt>
                    <dd>
                        <div class="prompt">
                            购物车中还没有商品，赶紧选购吧！
                        </div>
                    </dd>
                </dl>
            </div>`,
    data() {
        return {}

    },
    methods: {}
})
// 个人中心
Vue.component("cephalosome_navitems_user", {
    template: `<div class="user fl">
                <dl>
                    <dt>
                        <em></em>
                        <a href="">用户中心</a>
                        <b></b>
                    </dt>
                    <dd>
                        <div class="prompt">
                            您好，请<a href="">登录</a>
                        </div>
                        <div class="uclist mt10">
                            <ul class="list1 fl">
                                <li><a href="">用户信息></a></li>
                                <li><a href="">我的订单></a></li>
                                <li><a href="">收货地址></a></li>
                                <li><a href="">我的收藏></a></li>
                            </ul>

                            <ul class="fl">
                                <li><a href="">我的留言></a></li>
                                <li><a href="">我的红包></a></li>
                                <li><a href="">我的评论></a></li>
                                <li><a href="">资金管理></a></li>
                            </ul>

                        </div>
                        <div style="clear:both;"></div>
                        <div class="viewlist mt10">
                            <h3>最近浏览的商品：</h3>
                            <ul>
                                <li><a href=""><img src="images/view_list1.jpg" alt=""/></a></li>
                                <li><a href=""><img src="images/view_list2.jpg" alt=""/></a></li>
                                <li><a href=""><img src="images/view_list3.jpg" alt=""/></a></li>
                            </ul>
                        </div>
                    </dd>
                </dl>
            </div>`,
    data() {
        return {}

    },
    methods: {}
})
// 搜索
Vue.component("cephalosome_navitems_search", {
    template: `<div class="search fl">
                <div class="search_form">
                    <div class="form_left fl"></div>
                    <form action="/list.html?" method="get" class="fl">
                        <input type="text" name="serarch" class="txt" value="请输入商品关键字"/>
                        <input type="submit" class="btn" value="搜索"/>
                    </form>
                    <div class="form_right fl"></div>
                </div>

                <div style="clear:both;"></div>

                <div class="hot_search">
                    <strong>热门搜索:</strong>
                    <a href="">D-Link无线路由</a>
                    <a href="">休闲男鞋</a>
                    <a href="">TCL空调</a>
                    <a href="">耐克篮球鞋</a>
                </div>
            </div>`,
    data() {
        return {}

    },
    methods: {}
})